import React, { Component } from 'react'
import { Row, Col, Icon } from 'antd';
import { PanDescConstant } from '../constants/constant_en';
import { CusInput, InputGroup, HashQuestion } from './CusInput';
import { is } from 'immutable'
import { edit_multi, edit_range } from '../actions/search_action'
import { ActionConstant } from '../actions/search_action';
import { last_row_style, first_row_style, row_style, div_style } from '../styles/pan_style'


export default class OperatorComponent extends Component {
    componentDidMount() {

    }

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));

    }

    render() {
        const { data, dispatch } = this.props;

        const getCallback = (type) => {
            return (event, index, former_text) => {
                dispatch(edit_multi(former_text, event.target.value, type, index))
            }
        }

        //生成exact_match项
        const exact_match = data.get('content').get('exact_match');
        const exact_filed = (
            <InputGroup
                data={exact_match}
                title={PanDescConstant.exact_match}
                post="AND"
                style={first_row_style}
                hash='exact_match'
                callback={getCallback(ActionConstant.type_editor_operator_exact)}/>
        )

        //生成subtract_filed项
        const subtract = data.get('content').get('subtract');
        const subtract_filed = (
            <InputGroup
                data={subtract}
                title={PanDescConstant.shouldnt_contain}
                post="AND"
                style={row_style}
                hash="subtract"
                callback={getCallback(ActionConstant.type_editor_operator_subtract)}/>
        )

        const synonyms = data.get('content').get('synonyms');
        const synonyms_filed = (
            <InputGroup
                data={synonyms}
                title={PanDescConstant.word_synonyms}
                post="AND"
                style={row_style}
                hash="synonyms"
                callback={getCallback(ActionConstant.type_editor_operator_synonyms)}/>
        )

        const may = data.get('content').get('may');
        const may_filed = (
            <InputGroup
                data={may}
                title={PanDescConstant.may_contain}
                post="AND"
                style={row_style}
                hash="may"
                callback={getCallback(ActionConstant.type_editor_operator_may)}/>
        )

        const range_data = data.get('content').get('range');
        const range_filed = (
            <Row
                style={last_row_style}>

                <Col span={6}>
                    <label>
                        {PanDescConstant.range}&nbsp;:&nbsp;
                    </label>
                </Col>

                <Col span={18}>
                    <span style={{marginRight: 5}}/>
                    <CusInput
                        value={range_data.get('from')}
                        pre="FROM"
                        style={{width:150}}
                        onChange={(event)=>dispatch(edit_range(ActionConstant.type_editor_operator_from, event.target.value))}/>
                    <CusInput value={range_data.get('to')}
                              pre="TO"
                              style={{width:150}}
                              onChange={(event)=>dispatch(edit_range(ActionConstant.type_editor_operator_to, event.target.value))}/>
                    <HashQuestion hash='range'/>
                </Col>

            </Row>
        )

        return (
            <div style={div_style}>
                {exact_filed}
                {subtract_filed}
                {may_filed}
                {synonyms_filed}
                {range_filed}
            </div>
        )
    }

}
